<template>
  <div class="comment-body">
    <div class="comment-title">
        <div class="title">评论<span class="count">{{ commentListInfo.totalCount }}</span></div>
        <div class="tab">
            <span @click="orderChange(0)" :class="['tab-item',orderType == 0?'active':'']">热榜</span>
            <el-divider direction="vertical" />
            <span @click="orderChange(1)" :class="['tab-item',orderType == 1?'active':'']">最新</span>
        </div>
    </div>
    <!-- 发送评论 -->
    <div class="comment-form-panel">
        <CommentPost 
        :articleId="articleId"
        :pCommentId="0"
        :avatarWidth="50" 
        :userId="currentUserInfo.userId" 
        :showInsertImg="currentUserInfo.userId != null"
        @postCommentFinish="postCommentFinish"></CommentPost>
    </div>
    <!-- 评论列表 -->
    <div class="comment-list">
            <PageList :dataSource="commentListInfo" 
            :loading="loading" 
            @loadData="loadComment"
            NoDataMsg="暂无评论，发表你的评论吧！">
                <template #default="{data}">
                    <CommentListItem :commentData="data" 
                    :articleId="articleId"
                    :articleUserId="articleUserId"
                    :currentUserId="currentUserInfo.userId"
                    @hiddenAllReply="hiddenAllReplyHandler"
                    @postCommentFinish="postCommentFinish"
                    @reloadData="loadComment"
                    ></CommentListItem>
                    <!-- @postCommentFinish="postCommentFinish"接受自CommentListItem组件，用于二级评论完成时页更新评论数量 -->
                </template>
            </PageList>
        </div>
  </div>
</template>

<script setup>
import CommentPost from './CommentPost.vue';
import Avatar from '@/components/Avatar.vue'
import PageList from '@/components/PageList.vue';
import CommentListItem from './CommentListItem.vue';
import { ref, reactive, getCurrentInstance, onMounted, watch, nextTick } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { useStore } from 'vuex';
const store = useStore();
const { proxy } = getCurrentInstance();
const router = useRouter();
const route = useRoute();

const props = defineProps({
  articleId:{
    type:String,
  },
  articleUserId:{
    type:String,
  },
})

const api = {
    loadComment:"/comment/loadComment"

}
//隐藏所有回复框
const hiddenAllReplyHandler = ()=>{
    commentListInfo.value.list.forEach((item)=>{
        item.showReply = false;
    })
}

const emit = defineEmits(['updateCommentCount'])
//评论完成
const postCommentFinish = (resultData)=>{
    // props.commentData.children = resultData
    commentListInfo.value.list.unshift(resultData)
    //更新数量
    const totalCount = commentListInfo.value.totalCount + 1;
    commentListInfo.value.totalCount= totalCount;
    emit("updateCommentCount",totalCount)
}

//当前用户信息
const currentUserInfo = ref({});
watch(()=>store.state.loginUserInfo,(newVal,oldVal)=>{
    currentUserInfo.value = newVal || {}
},
{immediate : true , deep:true})



//排序
const orderType = ref(0);
const orderChange =(type)=>{
    orderType.value = type;
    loadComment();
}

//评论列表
const loading = ref(null)
const commentListInfo = ref([]);    
const loadComment = async()=>{
    let params={
        pageNo:commentListInfo.value.pageNo,
        articleId:props.articleId,
        orderType:orderType.value
    }
    loading.value = true;
    let result = await proxy.Request({
        url:api.loadComment,
        showLoading:false,
        params,
    })
    loading.value = false;
    if(!result){
        return;
    }
    commentListInfo.value = result.data;
}
loadComment();

</script>

<style lang="scss">
.comment-body{
    .comment-title{
        display: flex;
        align-items: center;
        .title{
            font-size: 20px;
            .count{
                font-size: 14px;
                padding: 0px 10px;
            } 
        }
        .tab{
            .tab-item{
                cursor: pointer;
            }
                .active{
                    color: var(--link);
                }
            }
    }
    .comment-form-panel {
      margin-top: 20px;  
    }
        
}
</style>